<template>
  <el-card class="banner-center" shadow="hover" :body-style="{ padding: 0 }">
    <swiper
      :spaceBetween="30"
      :centeredSlides="true"
      :autoplay="{
        delay: 2500,
        disableOnInteraction: false,
      }"
      :pagination="{
        clickable: true,
      }"
      class="mySwiper"
    >
      <swiper-slide v-for="it in data" :key="it.id" @click="gotoDetail(it, $router)">
        <img :src="it.imgCarousel" />
      </swiper-slide>
    </swiper>
  </el-card>
</template>

<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
// import Swiper core and required modules
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper";

// install Swiper modules
SwiperCore.use([Autoplay, Pagination, Navigation]);

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="less">
.swiper {
  width: 100%;
  height: 420px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  &:hover {
    opacity: 0.6;
  }
}

.banner-center {
  width: 100%;
  height: 420px;
}
</style>
